<template>
  <div class="searchModule">
    <div class="searchTop">
      <div class="searchUserName">
        <span>用户名称</span>
        <el-input placeholder="请输入用户名称" v-model="serch.userName">
        </el-input>
      </div>
      <div class="searchTelephone">
        <span>手机号码</span>
        <el-input placeholder="请输入手机号码" v-model="serch.telephone">
        </el-input>
      </div>
      <div class="searchStatus">
        <span>状态</span>
        <el-select v-model="serch.status" placeholder="用户状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="block">
        <span class="demonstration">创建时间</span>
        <el-date-picker
          v-model="serch.timeValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format=“yyyy-MM-dd”
        >
        </el-date-picker>
      </div>
    </div>
    <div class="searchBottom">
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button  icon="el-icon-refresh" @click="handleReset">重置</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      serch: {
        userName: "",
        telephone: "",
        status: "",
        timeValue: "",
      },
      
      options: [
        {
          value: "1",
          label: "正常"
        },
        {
          value: "0",
          label: "停用"
        }
      ]
    }
  },
  methods:{
    handleSearch(){
      
    },
    handleReset(){
      this.serch={}
    }
  }
};
</script>
<style lang="scss">
.searchModule {
  .searchTop {
    display: flex;
    div:nth-child(n) {
      display: flex;
      margin-right: 20px;
      line-height: 35px;
      span {
        display: inline-block;
        width: 100px;
      }
    }
    div:nth-child(3) {
      span {
        width: 50px;
      }
    }
    div:nth-child(4) {
      span {
        width: 80px;
      }
    }
  }
  .searchBottom {
    margin: 20px 0;
    .el-button:nth-child(2) {
      span {
        color: black;
      }
    }
  }
}
// .searchModule {
//   display: flex;
//   font-weight: 700;
//  .searchUserName,
//   .searchTelephone {
//     display: flex;
//     span {
//     font-size: 14px;
//     width: 100px;
//     line-height: 35px;
//     text-align: center;
//     // margin-right: 20px;
//     }
//     .el-input {
//       .el-input__inner {
//         width: 250px;
//       }
//     }
//   }
//   .searchStatus,
//   .block {
//     span {
//       margin: 10px;
//     }
//   }
// }
</style>
